<template>
	<div>
		<view class="Rboy-box">
			<view class="Rboy-obverse" @click.stop="obverse_btn">
				<image class="obverseimg" :src="obverseUrl" v-if="obverseUrl" mode="">
				</image>
				<view style="
					width: 100%;
					height: 100%;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
				  " v-else>
					<uni-icons type="camera" size="30" color="#00000060"></uni-icons>
					<text style="color: #00000060; margin-top: 10rpx; font-size: 14px">{{title}}</text>
				</view>
				<image 
					class="del_btn" 
					:src="del" 
					mode="" 
					v-if="obverseUrl && !disabled"
					@click.native.stop="del_btn('obverse')">
				</image>


			</view>

		</view>

		<vueCropper ref="cropper" hide-input :option="option" @getbase64Data="getbase64Data"  >
		</vueCropper>
	</div>
</template>

<script>
	import file from "./file.js";
	import {
		api
	} from "@/utils/api.js";
	import vueCropper from 'vue-cropper-h5'
import { array } from "js-md5";
	export default {
		name: "upload-cropper-h5",
		components: {
			vueCropper
		},
		props: {
			// 正面
			obverseUrl: {
				type: String,
				default: "",
			},
			// album 从相册选图，camera 使用相机，默认二者都有。如需直接开相机或直接选相册，请只使用一个选项
			sourceType: {
				type: Array || Object,
				default: () => {
					return ["album", "camera"];
				},
			},
			title: {
				type: String,
				default: "点击上传照片",
			},
			fileType: {
				type: String,
				default: "1",
			},
			disabled: {
				type: Boolean,
				default: false,
			},
			autoCropWidth:{
				type: Number,
				default: 441,
			},
			autoCropHeight:{
				type: Number,
				default: 358,
			},
			 fixedNumberW:{
				type: Number,
				default: 1.58,
			},
			fixedNumberH:{
				type: Number,
				default: 1,
			},
		},
		data() {
			return {
				del: file.del,
				option: {
					autoCropWidth: this.autoCropWidth,
					autoCropHeight:this.autoCropHeight,
					canMoveBox: true,
					fixedNumber: [this.fixedNumberW, this.fixedNumberH],
					fixedBox: false,
					// ceilbutton:true
				}, //配置
			};
		},
		created() {},
		methods: {
			async getbase64Data(data) {
				let that = this;
				let ress = await api.upload({
					url: data,
					data: {
						fileType: that.fileType
					},
				});
				console.log("ress.data.fileId================" + ress.data.fileId)
				that.$emit("selectChange", {
					tempFilePath: data,
					fileId: ress.data.fileId,
				});
			},
			obverse_btn() {
				if (this.obverseUrl) {
					// 预览
					this.previewImage(this.obverseUrl);
				} else {
					// 上传
					if (this.disabled) {
						return;
					}
					this.select_change("obverse");
				}
			},
			// 上传
			select_change(name) {


				let that = this;
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ["original", "compressed"], // 可以指定是原图还是压缩图，默认二者都有
					sourceType: this.sourceType, // 从相册选择
					success: (res) => {

						that.$refs.cropper.loadFile(res.tempFiles[0])
					},
				});
			},
			// 预览
			previewImage(current = 0) {
				uni.previewImage({
					current,
					urls: [this.obverseUrl],
				});
			},
			// 删除
			del_btn(name) {
				console.log(name);
				this.$emit("del", {
					name,
				});
			},
		},
	};
</script>

<style scoped lang="less">
	@imgWidth: 330rpx;
	@imgheight: 212rpx;
	@boxheight: 212rpx;

	.Rboy-box {
		display: flex;
		justify-content: space-between;
		// align-items: center;

		.Rboy-obverse {
			border-radius: 10rpx;
			width: @imgWidth;
			height: @boxheight;
			border: 1px dashed #00000060;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			position: relative;

			.obverseimg {
				width: @imgWidth;
				height: @imgheight;
			}

			.bottom {
				text-align: center;
				height: calc(@boxheight - @imgheight);
				background-color: #b7d7ff;
				color: #3b5fd2;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.del_btn {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: 20;
			}
		}

		.Rboy-reverse {
			border-radius: 10rpx;
			width: @imgWidth;
			height: @boxheight;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			position: relative;

			.reverseimg {
				width: @imgWidth;
				height: @imgheight;
			}

			.bottom {
				text-align: center;
				height: calc(@boxheight - @imgheight);
				background-color: #b7d7ff;
				color: #3b5fd2;
				font-size: 28rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}

			.del_btn {
				position: absolute;
				top: 5rpx;
				right: 5rpx;
				width: 50rpx;
				height: 50rpx;
				border-radius: 50%;
				z-index: 20;
			}
		}
	}
</style>